<template>
  <div class="app-container home">
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleTabClick">
      <el-tab-pane name="first">
        <span slot="label"><i class="el-icon-odometer"></i> 生产概况</span>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true" label-width="90px">
          <el-form-item label="年月" prop="dateOfMonth">
            <el-date-picker clearable
                v-model="queryParams.dateOfMonth"
                type="month"
                value-format="yyyy-MM"
                placeholder="选择排产月份">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="产地" prop="factoryId">
            <el-select v-model="queryParams.factoryId" placeholder="请选择" filterable @change="factoryChange" style="width: 240px;">
              <el-option v-for="team in factoryList" :key="team.deptId" :label="team.deptName" :value="team.deptId" />
            </el-select>
          </el-form-item>
          <el-form-item label="班组" prop="teamId">
            <el-select v-model="queryParams.teamId" placeholder="请选择" filterable @change="teamChange">
              <el-option v-for="team in teamList" :key="team.deptId" :label="team.deptName" :value="team.deptId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getIndexList">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
          </el-form-item>
        </el-form>
        <div class="home_content">
          <div class="home_list">
            <div v-if="dataList.length>0" class="home_item" v-for="item in dataList">
              <el-popover
                placement="bottom"
                title="所属该系列产品"
                width="200"
                trigger="manual"
                :content="item.smallProductName"
                v-model="visible">
                <div class="home_item_title" slot="reference" @click="visible = !visible"><p>{{item.productName}}</p></div>
              </el-popover>

              <div class="home_item_info">
                <div class="home_item_info_ico" style="background-image: url('https://alienware.oss-cn-beijing.aliyuncs.com/mall/medical.png');">
                  <!-- 请填充图片路径 -->
                  <!--               <img src="https://alienware.oss-cn-beijing.aliyuncs.com/mall/medical.png" alt="">-->
                </div>
                <div class="home_item_info_des">
                  <p>接单数<span>{{item.orderCount}}</span></p>
                  <p>完工数<span>{{item.finishOrderCount}}</span></p>
                  <p>剩余数<span>{{item.nextProductCount}}</span></p>
                  <p v-if="item.productDays>=30" style="color: #ee4343;">生产天数<span>{{item.productDays}}</span></p>
                  <p v-else>生产天数<span>{{item.productDays}}</span></p>
                  <!-- <p>产能数<span>{{item.productCount}}</span></p>-->
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-if="dataList.length===0">
          <el-empty description="暂无数据"></el-empty>
        </div>
      </el-tab-pane>
      <el-tab-pane name="second">
        <span slot="label"><i class="el-icon-date"></i> 每日生产</span>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true" label-width="90px">
          <el-form-item label="今日日期" prop="currentDate">
            <el-date-picker clearable
                            v-model="queryParams.currentDate"
                            type="date"
                            disabled
                            value-format="yyyy-MM-dd"
                            placeholder="选择生产日">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="产地" prop="factoryId">
            <el-select v-model="queryParams.factoryId" placeholder="请选择" filterable clearable @change="factoryChange" style="width: 240px;">
              <el-option v-for="team in factoryList" :key="team.deptId" :label="team.deptName" :value="team.deptId" />
            </el-select>
          </el-form-item>
          <el-form-item label="班组" prop="teamId">
            <el-select v-model="queryParams.teamId" placeholder="请选择" filterable clearable @change="teamChange">
              <el-option v-for="team in teamList" :key="team.deptId" :label="team.deptName" :value="team.deptId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="selectTodayProdList">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="loading" :data="secondList" :resizable="true" empty-text="暂无数据">
          <el-table-column label="分厂名称" align="center" prop="factoryName" />
          <el-table-column label="班组名称" align="center" prop="teamName" />
          <el-table-column label="订单日期" align="center" prop="order_date" width="100">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.orderDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品编码" align="center" prop="bomCode"  width="110"/>
          <el-table-column label="产品名称" align="center" prop="bomName"  width="120"/>
          <el-table-column label="规格型号" align="center" prop="productStandard" />
          <el-table-column label="产品数量" align="center" prop="product_num" />
          <el-table-column label="排产数量" align="center" prop="worker_ordernum" />
          <el-table-column label="今日入存" align="center" prop="todayInStock" >
            <template slot-scope="scope">
              {{scope.row.todayInStock}}
            </template>
          </el-table-column>
          <el-table-column label="累计入存" align="center" prop="totalInStock" >
            <template slot-scope="scope">
              {{scope.row.totalInStock}}
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="selectTodayProdList" />
      </el-tab-pane>
      <el-tab-pane name="third">
        <span slot="label"><i class="el-icon-video-pause"></i> 生产延期</span>

        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true" label-width="90px">
          <el-form-item label="年月" prop="dateOfMonth">
            <el-date-picker clearable
                            v-model="queryParams.dateOfMonth"
                            type="month"
                            value-format="yyyy-MM"
                            placeholder="选择排产月份">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="产地" prop="factoryId">
            <el-select v-model="queryParams.factoryId" placeholder="请选择" filterable clearable @change="factoryChange" style="width: 240px;">
              <el-option v-for="team in factoryList" :key="team.deptId" :label="team.deptName" :value="team.deptId" />
            </el-select>
          </el-form-item>
          <el-form-item label="班组" prop="teamId">
            <el-select v-model="queryParams.teamId" placeholder="请选择" filterable clearable @change="teamChange">
              <el-option v-for="team in teamList" :key="team.deptId" :label="team.deptName" :value="team.deptId" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="selectDelayOrderList">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="thirdList" :resizable="true">
          <el-table-column label="分厂名称" align="center" prop="factoryName" />
          <el-table-column label="班组名称" align="center" prop="teamName" />
          <el-table-column label="订单日期" align="center" prop="orderDate" width="100">
            <template slot-scope="scope">
              <span>{{ parseTime(scope.row.orderDate, '{y}-{m}-{d}') }}</span>
            </template>
          </el-table-column>
          <el-table-column label="产品编码" align="center" prop="bomCode"  width="110"/>
          <el-table-column label="产品名称" align="center" prop="bomName"  width="120"/>
          <el-table-column label="规格型号" align="center" prop="productStandard" />
          <el-table-column label="产品数量" align="center" prop="product_num" />
          <el-table-column label="排产数量" align="center" prop="worker_ordernum" />
          <el-table-column label="完工数量" align="center" prop="finished_count" />
          <el-table-column label="计划完成日期" align="center" prop="plan_finishdate" >
            <template slot-scope="scope">
              {{scope.row.plan_finishdate}}
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                    @pagination="selectDelayOrderList" />
      </el-tab-pane>
      <el-tab-pane name="fourth">
        <span slot="label"><i class="el-icon-shopping-cart-full"></i> 采购跟进</span>

        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="true" label-width="70px">
          <el-form-item label="年月" prop="dateOfMonth">
            <el-date-picker clearable
                            v-model="queryParams.dateOfMonth"
                            type="month"
                            value-format="yyyy-MM"
                            placeholder="选择排产月份">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="产地" prop="factoryId">
            <el-select v-model="queryParams.factoryId" placeholder="请选择" filterable @change="factoryChange" style="width: 230px;">
              <el-option v-for="team in factoryList" :key="team.deptId" :label="team.deptName" :value="team.deptId" />
            </el-select>
          </el-form-item>
          <el-form-item label="班组" prop="teamId">
            <el-select v-model="queryParams.teamId" placeholder="请选择" filterable>
              <el-option v-for="team in teamList" :key="team.deptId" :label="team.deptName" :value="team.deptId" />
            </el-select>
          </el-form-item>
          <el-form-item label="物料属性" prop="factoryId">
            <el-select v-model="queryParams.bomAttribute" placeholder="请选择" filterable style="width: 120px;">
              <el-option v-for="item in attributeList" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="selectPurchaseStage">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini">重置</el-button>
          </el-form-item>
        </el-form>

        <el-table v-loading="loading" :data="fourthList" :resizable="true">
          <el-table-column label="产地" align="center" prop="factoryName" />
          <el-table-column label="班组" align="center" prop="teamName" />
          <el-table-column label="物料编码" align="center" prop="bomCode"  width="110"/>
          <el-table-column label="物料名称" align="center" prop="bomName"  width="110"/>
          <el-table-column label="物料属性" align="center" prop="bomAttribute">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.bomAttribute===1">外购</el-tag>
              <el-tag type="success" v-if="scope.row.bomAttribute===2">自制</el-tag>
              <el-tag type="warning" v-if="scope.row.bomAttribute===3">委外</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="规格型号" align="center" prop="bomStandard" />
          <el-table-column label="物料需求" align="center" prop="needNum" />
          <el-table-column label="安全库存" align="center" prop="secStoreNum" />
          <el-table-column label="即时库存" align="center" prop="storNum" />
          <el-table-column label="采购在途" align="center" prop="purchaseStockInTransit" />
          <el-table-column label="差异库存" align="center" prop="differenceNum">
            <template slot-scope="scope" slot="header">
                  <span>
                    差异库存
                  <el-tooltip
                    :aa="scope"
                    class="item"
                    effect="dark"
                    content="差异库存 = (物料需求+安全库存)-(即时库存+采购在途库存)"
                    placement="top-start"
                  >
                    <i class="el-icon-warning" style="color:#66B1FF; margin-left:5px;'"> </i>
                  </el-tooltip>
                </span>
            </template>
          </el-table-column>
        </el-table>

<!--        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"-->
<!--                    @pagination="selectTodayProdList" />-->
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { listIndexData ,selectTodayProdList, selectDelayOrderList, selectPurchaseStage} from "@/api/sm/index/index";
import { listTeam,listFactory } from "@/api/system/dept";
import watermark from "watermark-dom";

export default {
  name: "Index",
  data() {
    return {
      // 版本号
      visible: false,
      version: "3.8.7",
      activeName: 'first',
      dataList: [],
      factoryList: [],
      teamList: [],
      loading: false,
      total: 0,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        productName: null,
        orderCode: null,
        contractCode: null,
        teamName: null,
        teamId: null,
        teamCode: null,
        workerConfirmstatus: 0,
        workerOrderstatus: null,
        planStatus: null,
        workerOrdertype: null,
        workerOrdertypes: null,
        sendStatus: null,
        dateOfMonth: null,
        currentDate: null,
        bomAttribute: 1,
      },
      attributeList: [
        {value: 1, label: "外购"},
        {value: 2, label: "自制"},
        {value: 3, label: "委外"},
      ],
      firstList: [],
      secondList: [],
      thirdList: [],
      fourthList: [],
      sendStatusList: [],
    };
  },
  created() {
    try {
      const username = this.$store.state.user.name;
      const nickname = this.$store.state.user.nickname;
      watermark.load({watermark_txt: `${username} ${nickname}`,
        watermark_id: 'wm_div_id',          //水印总体的id
        watermark_prefix: 'mask_div_id',    //小水印的id前缀
        watermark_x:20,                     //水印起始位置x轴坐标
        watermark_y:20,                     //水印起始位置Y轴坐标
        watermark_rows:0,                   //水印行数
        watermark_cols:0,                   //水印列数
        watermark_x_space:100,              //水印x轴间隔
        watermark_y_space:50,               //水印y轴间隔
        watermark_font:'微软雅黑',           //水印字体
        watermark_color:'black',            //水印字体颜色
        watermark_fontsize:'16px',          //水印字体大小
        watermark_alpha:0.15,               //水印透明度，要求设置在大于等于0.005
        watermark_width:180,                //水印宽度
        watermark_height:100,               //水印长度
        watermark_angle:15,                 //水印倾斜度数
        watermark_parent_width:0,      //水印的总体宽度（默认值：body的scrollWidth和clientWidth的较大值）
        watermark_parent_height:0,     //水印的总体高度（默认值：body的scrollHeight和clientHeight的较大值）
        watermark_parent_node:null     //水印插件挂载的父元素element,不输入则默认挂在body上
      });
    } catch (e) {
      console.log(e);
    }
    this.init();
  },
  methods: {
    // 例如：给表头 地址 加一个 icon，鼠标移入icon展示提示信息
    renderHeaderMethods(h, { column }) {
      return h(
        'div',
        {
          style: 'display:flex;margin:auto;'
        },
        [
          h('span', column.label),
          h('promptMessages', {
            // 引用 promptMessages 全局组件
            props: {
              // messages 里面配置的信息即为 Tooltip 提示信息
              messages: [`${column.tips}`]
            }
          })
        ]
      );
    },
    init() {
      const currentDate = new Date();
      const year = currentDate.getFullYear();
      const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份需要加1，然后确保是两位数
      const day = currentDate.getDate().toString().padStart(2, '0'); // 获取日并确保是两位数
      this.queryParams.dateOfMonth = `${year}-${month}`;
      this.queryParams.currentDate = `${year}-${month}-${day}`;
      this.getFactoryList();
    },
    handleTabClick(tab, event) {
      this.visible = false;
      this.reset();
      this.init();
    },
    reset() {
      this.queryParams = {
        pageNum: 1,
        pageSize: 10,
        productName: null,
        orderCode: null,
        contractCode: null,
        teamName: null,
        teamId: null,
        teamCode: null,
        workerConfirmstatus: 0,
        workerOrderstatus: null,
        planStatus: null,
        workerOrdertype: null,
        workerOrdertypes: null,
        sendStatus: null,
        dateOfMonth: null,
        currentDate: null,
        bomAttribute: 1,
      };
    },
    /** 查询订单信息列表 */
    getFactoryList() {
      this.loading = true;
      listFactory({"level":2}).then(response => {
        this.factoryList = response.data;
        if (this.factoryList[0].selfDeptId != 99) {
          this.queryParams.factoryId = this.factoryList[0].selfDeptId;
        }
        this.getTeamList(this.queryParams.factoryId);
        this.loading = false;
      });
    },
    teamChange() {
      this.queryList();
    },
    factoryChange(){
      this.getTeamList(this.queryParams.factoryId);
    },
    queryList() {
      if (this.activeName === "first") {
        this.getIndexList();
      } else if (this.activeName === "second") {
        this.selectTodayProdList();
      } else if (this.activeName === "third") {
        this.selectDelayOrderList();
      }/* else if (this.activeName === "fourth") {
        this.selectPurchaseStage();
      }*/
    },
    /** 查询订单信息列表 */
    getTeamList(parentId, call) {
      this.loading = true;
      listTeam({"parentId":parentId}).then(response => {
        this.teamList = response.data || [];
        // if (this.teamList.length >0) {
        //   this.queryParams.teamId = this.teamList[0].deptId;
        // }
        this.loading = false;
        this.queryList();
      }).catch(() => {
        this.loading = false;
      });
    },
    goTarget(href) {
      window.open(href, "_blank");
    },
    getIndexList() {
      this.loading = true;
      let teamIdStr = "";
      if (this.queryParams.teamId) {
        teamIdStr = this.queryParams.teamId;
      } else {
        for(let i=0;i<this.teamList.length;i++) {
          let dept = this.teamList[i];
          if (i != this.teamList.length-1) {
            teamIdStr = teamIdStr + dept.deptId + ",";
          } else {
            teamIdStr += dept.deptId;
          }
        }
      }
      listIndexData({
        "factoryIds": this.queryParams.factoryId,
        "teamIds": teamIdStr,
        "dateOfMonth": this.queryParams.dateOfMonth
      }).then(response => {
        this.dataList = response.data;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    selectTodayProdList() {
      this.loading = true;
      let teamIdStr = "";
      if (this.queryParams.teamId) {
        teamIdStr = this.queryParams.teamId;
      } else {
        for(let i=0;i<this.teamList.length;i++) {
          let dept = this.teamList[i];
          if (i != this.teamList.length-1) {
            teamIdStr = teamIdStr + dept.deptId + ",";
          } else {
            teamIdStr += dept.deptId+"";
          }
        }
      }
      let factoryIdStr = "";
      if (this.queryParams.factoryId) {
        factoryIdStr = this.queryParams.factoryId;
      } else {
        for(let i=0;i<this.factoryList.length;i++) {
          let dept = this.factoryList[i];
          if (i != this.factoryList.length-1) {
            factoryIdStr = factoryIdStr + dept.deptId + ",";
          } else {
            factoryIdStr += dept.deptId+"";
          }
        }
      }
      let param = {
        "factoryIds": factoryIdStr.toString(),
        "teamIds": teamIdStr.toString(),
        "dateOfMonth": this.queryParams.currentDate
      };
      Object.assign(param, this.queryParams);
      selectTodayProdList(param).then(response => {
        this.secondList = response.rows;
        this.total = response.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    selectDelayOrderList() {
      this.loading = true;
      let teamIdStr = "";
      if (this.queryParams.teamId) {
        teamIdStr = this.queryParams.teamId;
      } else {
        for(let i=0;i<this.teamList.length;i++) {
          let dept = this.teamList[i];
          if (i != this.teamList.length-1) {
            teamIdStr = teamIdStr + dept.deptId + ",";
          } else {
            teamIdStr += dept.deptId;
          }
        }
      }
      let factoryIdStr = "";
      if (this.queryParams.factoryId) {
        factoryIdStr = this.queryParams.factoryId;
      } else {
        for(let i=0;i<this.factoryList.length;i++) {
          let dept = this.factoryList[i];
          if (i != this.factoryList.length-1) {
            factoryIdStr = factoryIdStr + dept.deptId + ",";
          } else {
            factoryIdStr += dept.deptId;
          }
        }
      }
      let param = {
        "factoryIds": factoryIdStr,
        "teamIds": teamIdStr,
        "dateOfMonth": this.queryParams.currentDate
      };
      Object.assign(param, this.queryParams);
      selectDelayOrderList(param).then(response => {
        this.thirdList = response.rows;
        this.total = response.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
    selectPurchaseStage() {
      this.loading = true;
      let teamIdStr = "";
      if (this.queryParams.teamId) {
        teamIdStr = this.queryParams.teamId;
      } else {
        for(let i=0;i<this.teamList.length;i++) {
          let dept = this.teamList[i];
          if (i != this.teamList.length-1) {
            teamIdStr = teamIdStr + dept.deptId + ",";
          } else {
            teamIdStr += dept.deptId;
          }
        }
      }
      selectPurchaseStage({
        "factoryIds": this.queryParams.factoryId,
        "teamIds": teamIdStr,
        "dateOfMonth": this.queryParams.dateOfMonth,
        "bomAttribute": this.queryParams.bomAttribute,
      }).then(response => {
        this.fourthList = response.data;
        // this.total = response.total;
        this.loading = false;
      }).catch(() => {
        this.loading = false;
      });
    },
  },
};
</script>

<style scoped lang="scss">
  .home_header {
    padding: 10px;
    background-color: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;

    select, input, button {
      margin-right: 10px;
    }
  }

.home_content {
  * {
    padding: 0;
    margin: 0;
  }
  .home_list {
    display: flex;
    flex-wrap: wrap;
    .home_item {
      width: 32%;
      margin-top: 60px;
      &:nth-child(-1n+3){
        margin-top: 0;
      }
      .home_item_info {
        margin-top: 18px;
        display: flex;
        justify-content: center;
        .home_item_info_des {
          p {
            font-size: 16px;
            color: #333;
            line-height: 150%;
            margin-top: 10px;
            span {
              margin-left: 24px;
            }
            &:nth-child(1) {
              margin-top: 0;
            }
          }
        }
        .home_item_info_ico {
          margin-top: 16px;
          margin-right: 20px;
          width: 100px;
          height: 100px;
          background-color: antiquewhite;
          border-radius: 50%;
          overflow: hidden;
          /*background-image: url('https://alienware.oss-cn-beijing.aliyuncs.com/mall/medical.png');*/
          background-size: cover; /* 使用cover让图片填充整个圆形区域 */
        }
      }
      .home_item_title {
        font-size: 24px;
        color: #666;
        text-align: center;
      }
    }
  }
}


.home {
  blockquote {
    padding: 10px 20px;
    margin: 0 0 20px;
    font-size: 17.5px;
    border-left: 5px solid #eee;
  }
  hr {
    margin-top: 20px;
    margin-bottom: 20px;
    border: 0;
    border-top: 1px solid #eee;
  }
  .col-item {
    margin-bottom: 20px;
  }

  ul {
    padding: 0;
    margin: 0;
  }

  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 13px;
  color: #676a6c;
  overflow-x: hidden;

  ul {
    list-style-type: none;
  }

  h4 {
    margin-top: 0px;
  }

  h2 {
    margin-top: 10px;
    font-size: 26px;
    font-weight: 100;
  }

  p {
    margin-top: 10px;

    b {
      font-weight: 700;
    }
  }

  .update-log {
    ol {
      display: block;
      list-style-type: decimal;
      margin-block-start: 1em;
      margin-block-end: 1em;
      margin-inline-start: 0;
      margin-inline-end: 0;
      padding-inline-start: 40px;
    }
  }
}
</style>
